<!DOCTYPE html>
<html>
    <head>
         <link rel="stylesheet" type="text/css" href="css.css" />
         <script src="//code.jquery.com/jquery-1.10.2.js">
        </script>
        <script src="Script/jquery.cookie.js"></script>
        <script>
            $(function(){
               var t= $("<table/>");
                for(var i=1;i<=10;i++)
                {
                    var tr=$('<tr/>');
                   t.append(tr);
                 for(var j=1;j<=10;j++)
                 {
                     var td=$('<td/>');
                     tr.append(td.text(i*j));
                 }
                 }     
                 t.appendTo($('body'));
        
            });
                      
        </script>
    </head>
<body>

<p id="demo">Click the button to make a BUTTON element.</p>

<button id="btn">Try it</button>

<script>

btn.onclick= function myFunction()
{
            var p=document.getElementById("demo");
             
			var table=document.createElement('table');
                        table.setAttribute("border",1);
                        table.id="tab";
                       
                   var tchk;   
            
		for(var i=1;i<=10;i++)
               {
				   var tabletr=document.createElement('tr');
               for(var j=0; j<=11;j++)
               {
                   var tabletd;
                   if(j===0)
                   {
                        tabletd=document.createElement('td');
                        tchk=document.createElement('input');
                        tchk.type="checkbox";
                        tchk.id="chk"+i;
                        tchk.name="chk1";
                        
                        
                      tabletd.appendChild(tchk);
                   }
                  else if(j===11)
                  {
                      tabletd=document.createElement('td');
                      tbtn=document.createElement('input');
                      tbtn.type='button';
                      tbtn.id="btn"+i;
                      tbtn.value="Delete";
                      tbtn.onclick="deleteRow(this)";
                      tabletd.appendChild(tbtn);
                
                  }
                   else 
                   {
		 	   tabletd=document.createElement('td');
				   var t=document.createTextNode(j*i);
				   tabletd.appendChild(t);
                     }
                                         //  tabletd.setAttribute("class","tablecolum")
				   tabletr.appendChild(tabletd);
                                   
              }
                           
		   table.appendChild(tabletr);
                                   
           }	
	p.appendChild(table);
       
     
       
     table.setAttribute("class","table"); 
     
          var theader=table.createTHead();
         var row=theader.insertRow(0);
      for(var i=0;i<=10;i++)
      {
          var cell = row.insertCell(i);
          if(i===0)
          {
                        tchk=document.createElement('input');
                        tchk.type="checkbox";
                        tchk.setAttribute("id","chkMain");
                        tchk.name="tchk2";
                        tchk.className="txtname";
                        cell.appendChild(tchk);
                    }
          else
           cell.innerHTML = "<b>This is a table header</b>";
       }
       chkMain.onchange=function()
       {
         
                if(this.checked)
                {
                    for(var i=1;i<=10;i++)
                    {
                    document.getElementById("chk"+i).checked=true;
                }
                   //
                }
                else
                {
                    for(var i=1;i<=10;i++)
                    {
                    document.getElementById("chk"+i).checked=false;
                }
                }
                    
    
       };
       
 tbtn.onclick=function deleteRow(r)
{
    alert("test");
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("tab").deleteRow(i);
}
            
}


</script>

</body>
</html>
